<template>
  <div id="app">
    <myHeader class="myheader"></myHeader>
    <router-view :datas="this.datas" class="view"></router-view>
    <div class="footer">
      <ul>
        <li>
            <router-link to="/Home" class="">菜谱</router-link>
        </li>
        <li>
            <router-link to="/collect" class="">收藏</router-link>
        </li>
        <li>+</li>
        <li>分享</li>
        <li>评论</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Home from "./components/Home.vue"
  import myFooter from "./components/Footer/Footer.vue"
  import myHeader from "./components/Header/Header.vue"
  export default {
    name: 'app',
    components:{
      Home,
      myFooter,
      myHeader
    },
    data(){
      return{
        datas:{}
      }
    },
    methods:{},
    created(){
      let self=this
      this.$axios.get("/api/datas")
        .then((res)=>{
          res=res.data
          if (res.error===0){
          self.datas=res.data
          }
        })
        .catch((error)=>{
        alert(error)
        })
    }
  }
</script>

<style lang="less">
  *{
    margin:0;
    padding: 0px;
  }

  .more{
    background-color: white;
    z-index: 999;
  }

  .myheader{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 80px;
    z-index: 99;
  }

  .view{
    margin-top: 79px;
  }

  .footer{
        display: flex;
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 80px;
        z-index: 20;
        background-color: white;
      ul {
        flex: 1px;
        margin-right: 50px;
      }
      li{
        list-style: none;
        float: left;
        margin-left: 50px;
        padding: 25px;
        font-size: 25px;
        a{
          text-decoration: none;
          color: black;
        }
      }
  }

</style>
